<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title>ECharts资源统计柱形图</title>
<link href="layui/css/layui.css" rel="stylesheet" type="text/css" />
<script src="layui/layui.js"></script>
<script src="echarts.js"></script>
<script src="jquery-1.8.2.js"></script>
</head>
<body>
	<!-- 表单搜索-->
	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">区间范围</label>
			<div class="layui-input-inline" style="width: 100px;">
				<input type="text" name="beginTime" id="beginTime" placeholder="开始"
					autocomplete="off" class="layui-input">
			</div>
			<div class="layui-form-mid">-</div>
			<div class="layui-input-inline" style="width: 100px;">
				<input type="text" name="endTime" id="endTime" placeholder="结束"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<input type="button" class="layui-btn" id="souBtn" value="搜索" />
	</div>
	<!-- 表单搜索结束 -->

	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style="width: 600px; height: 400px;"></div>

	<!-- 脚本代码部分 -->
	<script type="text/javascript">
		layui.use('laydate',
				function() {
					var laydate = layui.laydate;
					var $ = layui.$;

					//执行一个laydate实例
					laydate.render({
						elem : '#beginTime' //指定元素
					});
					laydate.render({
						elem : '#endTime' //指定元素
					});

					//定义函数
					var active = {
						qingqiu : function() {
							//ajax异步请求服务端 获取 图表的数据
							$.get("getStatistic", {
								"beginTime" : $("#beginTime").val(),
								"endTime" : $("#endTime").val()
							}, function(res) {
								active.tubiao(res.xData, res.yData);
							});
						},
						tubiao : function(xData, yData) {
							// 基于准备好的dom，初始化echarts实例
							var myChart = echarts.init(document
									.getElementById('main'));
							// 指定图表的配置项和数据
							var option = {
								title : {
									text : '资源信息管理统计柱形图'
								},
								tooltip : {},
								legend : {
									data : [ '资源使用人次' ]
								},
								xAxis : {
									type : 'category',
									data : xData
								//x轴的数据
								},
								yAxis : {},
								series : [ {
									name : '资源使用人次',
									type : 'bar',//bar 柱状图     line 折线图 
									data : yData
								//y轴的数据
								} ]
							};
							// 使用刚指定的配置项和数据显示图表。
							myChart.setOption(option);
						}
					};//定义函数---end

					//调用函数中的请求
					active.qingqiu();

					//点击事件
					$("#souBtn").click(function() {
						active.qingqiu();
					});

				});
	</script>

</body>
</html>